<template>
  <div>
    <ag-grid-vue
      style="width: 100%; height: 600px"
      :class="themeClass"
      :columnDefs="colDefs"
      :rowData="rowData"
      :defaultColDef="defaultColDef"
    >
    </ag-grid-vue>
  </div>
</template>

<script>
  import 'ag-grid-community/styles/ag-grid.css';
  import 'ag-grid-community/styles/ag-theme-quartz.css';
  import "ag-grid-charts-enterprise";
  import { AgGridVue } from 'ag-grid-vue3';
  import { createApp, ref } from 'vue';
  export default {
    components: {
      AgGridVue,
    },
    setup() {
      const rowData = ref([
        { make: 'Tesla', model: 'Model Y', price: 64950, electric: true, },
        { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
        { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
        { make: 'Mercedes', model: 'EQA', price: 48890, electric: true },
        { make: 'Fiat', model: '500', price: 15774, electric: false },
        { make: 'Nissan', model: 'Juke', price: 20675, electric: false },
      ]);

      const colDefs = ref([
        { field: 'make',minWidth: 350, flex: 1,pinned: 'left',filter: "agMultiColumnFilter" },
        { field: 'model' },
        { field: 'price' },
        { field: 'electric' },
      ]);
      const defaultColDef = ref({
        width: 150,
        filter: true,
        cellStyle: { fontWeight: 'bold' },
      })

      return {
        rowData,
        colDefs,
        defaultColDef,
        themeClass: 'ag-theme-quartz',
      };
    },
  };
</script>

<style></style>
